<template>
  <div class="board pagebox" :style="{ height: boardHeight }">
    <web-header></web-header>
    <aside-menu @collapsedChange="collapsedChange" :height="menuheight" @showMenuChange="showMenuChange"></aside-menu>
    <!-- <aside-menu v-if="HeadNavTypes == 2" @collapsedChange="collapsedChange" :height="menuheight"></aside-menu> -->
    <!-- <statis-menu v-if="HeadNavTypes == 4" @collapsedChange="collapsedChange" :height="menuheight"></statis-menu> -->
    <div class="app-body" :style="{ height: appBodyHeight, 'margin-left': appBodyml }" ref="scrollDiv">
      <section class="app-main pagebox">
        <!-- <transition name="fade-transform" mode="out-in"> -->
        <a-config-provider :locale="locale">
          <router-view />
        </a-config-provider>
        <!-- </transition> -->
      </section>
    </div>
  </div>
</template>

<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import '@/unit/rem';
import { initUserInfo } from '@/unit/tool';
import webHeader from './component/webHeader';
import asideMenu from './component/asideMenu';
import statisMenu from './component/asideMenu/statisMenu';
import varibless from '@assets/styles/varibless.less';
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('menu/');

moment.locale('zh-cn');

//获取url参数(一个参数)
function oneValues() {
  let result = '';
  let url = window.location.hash; //获取url中"?"符后的字串
  if (url.indexOf('?') != -1) {
    result = url.substr(url.indexOf('=') + 1);
    localStorage.setItem('phone', result);
  }
  return result;
}

//获取url参数(多个参数)
function manyValues() {
  let url = window.location.search;
  if (url.indexOf('?') != -1) {
    let str = url.substr(1);
    strs = str.split('&');
    let key = new Array(strs.length);
    let value = new Array(strs.length);
    for (let i = 0; i < strs.length; i++) {
      key[i] = strs[i].split('=')[0];
      value[i] = unescape(strs[i].split('=')[1]);
    }
  }
}

export default {
  name: 'board',
  components: { webHeader, asideMenu, statisMenu },
  data() {
    return {
      userName: '',
      name: '',
      role: '',
      compId: '',
      locale: zh_CN,
      varibless,
      appBodyml: 0,
    };
  },
  computed: {
    ...mapState(['menuLists']),
    HeadNavTypes() {
      this.haveheight();
      if (this.$store.getters.HeadNavTypes == 2 || this.$store.getters.HeadNavTypes == 4) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.collapsedChange();
        return this.$store.getters.HeadNavTypes;
      } else {
        this.appBodyml = 0;
      }
    },
  },
  created() {
    let _this = this;
    if (window.less || window.less.modifyVars) {
      // setTimeout(() => {
      this.haveheight();
      console.log('this.menuheight2====' + this.menuheight);
      // }, 700);
      console.log('this.menuheight1====' + this.menuheight);

      window.onresize = function() {
        // 定义窗口大小变更通知事件
        // _this.screenWidth = document.documentElement.clientWidth // 窗口宽度
        _this.menuheight = _this.appBodyHeight =
          document.documentElement.clientHeight - _this.varibless.headerHeightpxno + 'px'; // 窗口高度
      };
    }
  },
  watch: {
    $route: function(to, from) {
      this.$refs.scrollDiv.scrollTop= 0;
    },
  },
  methods: {
    haveheight() {
      let winHeight = '90vh';
      if (window.innerHeight) {
        winHeight = window.innerHeight;
      } else if (document.body && document.body.clientHeight) {
        winHeight = document.body.clientHeight;
      }
      this.boardHeight = document.body.clientHeight + 'px';
      this.menuheight = this.appBodyHeight = winHeight - this.varibless.headerHeightpxno + 'px';
    },
    showMenuChange(val) {
      if (val) {
        this.appBodyml = this.varibless.menuWopen;
      } else {
        this.appBodyml = 0;
      }
    },

    collapsedChange(val) {
      if (val) {
        this.appBodyml = this.varibless.menuWClose;
      } else {
        this.appBodyml = this.varibless.menuWopen;
      }
      console.log(this.appBodyml);
    },
    userExitHandle() {
      // 点击退出，清理缓存
      this.$Modal.confirm({
        title: '确认退出吗?',
        okText: '确 定',
        cancelText: '取 消',
        onOk: () => {
          localStorage.removeItem('phone');
          this.$router.push('/');
          // 将路由改到/index/mend;
          // this.handleChangeRouter('/index/mend');
        },
        onCancel() {},
      });
    },
    goPage() {
      window.location = 'http://cimt2021.hzncc.cn';
      // window.location = 'http://localhost:8088';
    },
  },
  mounted() {},
  // async created() {
  //   let _this = this;
  //   let userName = oneValues();
  //   _this.userName = userName || localStorage.getItem('phone');
  //   const res = await api.getRoleId({ phoneNumber: _this.userName });
  //
  //   if (res.MsgCode !== 0) {
  //     _this.$message.error('获取用户信息失败');
  //   } else {
  //     _this.name = res.Data.name;
  //     _this.role = res.Data.ID;
  //     _this.compId = res.Data.compid;
  //     localStorage.setItem('userInfo', JSON.stringify(res.Data));
  //   }
  // },
};
</script>

<style scoped="scoped" lang="less">
@import './style.less';
</style>
